$cor_0: #fff;
$cor_1: #001529;
$cor_2: #002140;
$cor_3: #f1f3f5;
$cor_4: #d7d7d7;

$imagePath: './../../assets/images';

//  flex
@mixin flex_layout($fl_dir: row,  $js_co: flex-start, $al_co: flex-start) {
  display: flex;
  flex-direction: $fl_dir;
  justify-content: $js_co;
  align-items: $al_co;
}

// posiition
@mixin pos($pos: relative, $vDir: left, $hDir: top, $vDis: auto, $hDis: auto, $z: auto) {
    position: $pos;

    @if $vDir == right {
      right: $vDis;
    } @else {
      left: $vDis;
    }

    @if ($hDir == bottom) {
      bottom: $hDis;
    } @else {
      top: $hDis;
    }

    z-index: $z;
}

// arrow
@mixin arrow($dis: top, $w: 4px, $h: 3px, $cor: $cor_0) {
  padding: 0;
  margin: 0;
  height: 0;
  line-height: 0;
  border-width: $h $w;

  @if $dis == top {
    border-style: solid dashed dashed dashed;
    border-color: $cor transparent transparent transparent;
  } @else if $dis == bottom {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $cor transparent;
  } @else if $dis == right {
    border-style: dashed solid dashed dashed;
    border-color: transparent $cor transparent transparent;
  } @else {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $cor;
  }
}